<template>
  <div class="">
    <el-card>
      <div style="display: flex; justify-content: space-between">
        <el-button type="primary" @click="$router.push('/dmmanager/dmadd')"
          >添加</el-button
        >
        <div>
          <el-input
            v-model="keyword"
            style="width: 240px"
            placeholder="请输入dm"
            clearable
            @clear="clear"
            @change="enter"
          />
          <el-button type="primary" @click="search" style="margin-left: 10px"
            >搜索</el-button
          >
        </div>
      </div>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="180" />
        <el-table-column prop="compere_name" label="花名" />
        <el-table-column label="照片" v-slot="{ row }">
          <el-image
            style="width: 50px; height: 50px; border-radius: 50%"
            :src="URL + '/' + row.photo"
          />
        </el-table-column>
        <el-table-column label="性别" v-slot="{ row }">
          <el-tag :type="row.sex == 0 ? 'primary' : 'danger'">{{
            row.sex == 0 ? "男" : "女"
          }}</el-tag>
        </el-table-column>
        <el-table-column prop="address" label="操作" v-slot="{ row }">
          <el-button type="success" @click="examine(row.id)"
            >查看ta带的本</el-button
          >
          <el-button type="primary" @click="editDm(row.id)">编辑</el-button>
          <el-button type="danger" @click="delDm(row)">删除</el-button>
        </el-table-column>
      </el-table>
      <el-pagination
        small
        background
        layout="prev, pager, next"
        :total="total"
        class="mt-4"
        :page-size="pageSize"
        @change="changePage"
        style="display: flex; justify-content: center"
      />
    </el-card>
    <el-dialog v-model="dialogTableVisible" title="查看" width="800">
      <div overflow="auto" style="height: 400px">
        <el-table :data="ggmList">
          <el-table-column type="index" label="序号" width="150" />
          <el-table-column property="script_name" label="剧本名" />
          <el-table-column property="price" label="价格" />
          <el-table-column label="类型" v-slot="{ row }">
            <el-tag
              v-for="item in row.itemCateNameArr"
              :key="item"
              style="margin: 0 2px"
              >{{ item }}</el-tag
            >
          </el-table-column>
        </el-table>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogTableVisible = false">Cancel</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
const URL = import.meta.env.VITE_APP_API_URL;
import { reqDmList, reqCompereScripts, ReqCompereDel } from "@/api/dm/index";
import { ReqDmList, ReqCompereScripts } from "@/api/dm/model";
import { useRoute, useRouter } from "vue-router";
const $router = useRouter();
const page = ref<number>(1);
const pageSize = ref<number>(7);
const total = ref<number>(0);
const tableData = ref<ReqDmList[]>([]);
const dialogTableVisible = ref<boolean>(false);
const ggmList = ref<ReqCompereScripts[]>([]);
const keyword = ref<string>("");

//清除搜索内容
const clear = () => {
  getDmList();
};

// 搜索
const search = () => {
  getDmList(keyword.value);
};
const enter = () => {
  getDmList(keyword.value);
};

// 查看ta带的本
const examine = async (compere_id: number) => {
  dialogTableVisible.value = true;
  let result = await reqCompereScripts(compere_id);
  result.forEach((item) => {
    if (item.cate_name) {
      item.itemCateNameArr = item.cate_name.split(",");
    }
  });
  ggmList.value = result;
  console.log(result);
};

// 编辑
const editDm = (id: number) => {
  $router.push("/dmmanager/dmedit?id=" + id);
};

// 删除
const delDm = async (row: any) => {
  ElMessageBox.confirm(`你确定要删除${row.compere_name}dm吗?`, "Warning", {
    type: "warning",
  })
    .then(async () => {
      await ReqCompereDel(row.id);
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      getDmList();
    })
    .catch(() => {});
};

// 分页
const changePage = (pageNum: number) => {
  page.value = pageNum;
  getDmList();
};

// 获取dm列表
const getDmList = async (keyword = "") => {
  let result = await reqDmList({
    page: page.value,
    pageSize: pageSize.value,
    keyword,
  });
  total.value = result.count;
  tableData.value = result.rows;
};

onMounted(() => {
  getDmList();
});
</script>

<style scoped lang="scss"></style>
